<template>
  <div>
    <div class="table">
      <Table ref="selection" size="small" :columns="columns" :data="linkData" @on-selection-change="onSelectChange"></Table>
    </div>
    <div class="table-bottom">
      <div class="table-btns left-btns">
        <Button type="primary" icon="md-add" @click="addUser">新增</Button>
        <Button :disabled="!(selectedId.length>0)" type="primary" icon="ios-trash-outline" @click="deleteHandle(selectedId)">删除</Button>
      </div>
      <div class="table-pages">
        <Page
          :total="pageTotal"
          show-sizer
          show-total
          size="small"
          :page-size-opts="pageSizeOpts"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
        />
      </div>
    </div>
    <Modal
      v-model="modal"
      width="800"
      transfer
      :title="editTitle"
      >
        <template slot="footer">
          <Button type="text" @click="modal=false">取消</Button>
          <Button type="primary" @click="save">保存</Button>
        </template>
        <Form ref="editDom" :model="editData" :label-width="120" :rules="editDataRules">
          <Row>
            <Col span="12">
              <FormItem label="名称" prop="title">
                <Input v-model="editData.title" placeholder="请输入名称" :clearable="true"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="网址" prop="url">
                <Input v-model="editData.url" placeholder="请输入网址" :clearable="true"></Input>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="简介" prop="brief">
                <Input type="textarea" v-model="editData.brief" placeholder="请输入简介"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
    </Modal>
  </div>
</template>
<script>

import { getLinkList, addOrEditLink, deleteLink} from '@/api/server.js';
export default {
  components: {
    
  },
	created(){
		
	},
  mounted() {
    this.getLinkListFunc();
  },
  data() {
    return {
      selectedId: 0,
      modal: false,
      editTitle: '新增链接',
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          key: 'action',
          title: '操作',
          width: 80,
          fixed: 'left',
          render: (h, params) => {
            return h('div',
              [
                h('Button',{
                  props: {
                    type:'primary',
                    size: 'small',
                  },
                  style: {
                    fontSize: '12px',
                  },
                  on: {
                    click: () => {
                      this.modal = true;
                      this.editTitle = '编辑链接';
                      let data = JSON.parse(JSON.stringify(params.row));
                      data.developDateRange = [data.startdate, data.enddate];
                      this.editData = data;
                    }
                  },
                },'编辑'),
              ]
            )
          }
        },
        {
          title: '名称',
          key: 'title'
        },
        {
          title: '网址',
          tooltip: true,
          key: 'url'
        },
        {
          title: '简介',
          key: 'brief',
          tooltipTheme: 'light',
          tooltip: true,
        },
        {
          title: '缩略图',
          key: 'image',
          render: (h,params) => {
            return h('span',
            {
              style: {
                color:'#F99C34',
                cursor:'pointer'
              }
            },
            params.row.image? '查看' : '' 
            )
          }
        },
        {
          title: '添加日期',
          key: 'pubtime',
        }
      ],
      linkData: [],
      editDataRules: {
        title: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '网址不能为空', trigger: 'blur' },
        ],
        brief: [
          { required: true, message: '简介不能为空', trigger: 'blur' },
        ],
      },
      editData: {
        title: '',
        url: '',
        pubtime: '',
        brief: '',
        image: '',
      },
      pageParam: {
        currentPage:1,
        pageSize:10
      },
      pageTotal:0,
      pageSizeOpts: [10,20,50,100],
    }
  },
	methods:{
    getLinkListFunc() {
      getLinkList(this.pageParam).then(res => {
        this.pageTotal = res.data.len;
        this.linkData = res.data.list;
        this.onSelectChange([])
      })
    },
    onSelectChange(data) {
      let selectedId = [];
      data.forEach(element => {
        selectedId.push(element.id);
      });
      this.selectedId = selectedId;
    },
    addUser() {
      this.modal = true;
      this.editTitle = '新增链接';
    },
    deleteHandle(ids = []) {
      this.$Modal.confirm({
        title:'删除提示',
        content:`确定删除选中友情链接吗？`,
        onOk: () => {
          deleteLink({ids:ids}).then( res=> {
            if(res.data) {
              $Message.success('删除成功');
              this.getLinkListFunc();
            }else {
              $Message.error('删除失败');
            }
          })
        },
        onCancel: () => {

        },

      })
      
    },
    save() {
      this.$refs.editDom.validate(valid => {
        if(valid) {
          addOrEditLink(this.editData).then(res => {
            if(res.data) {
              $Message.success('保存成功');
              this.modal = false;
              this.$refs.editDom.resetFields()
              this.getLinkListFunc();
            }else {
              $Message.error('保存失败');
            }
          })
        }
      })
    },
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize;
      this.getLinkListFunc()
    },
    pageChange(page) {
      this.pageParam.currentPage = page;
      this.getLinkListFunc()
    },
	},
};
</script>

<style lang="less" scoped>
.table {
  border: 1px solid #eaecf1;
  border-bottom: none;
  margin-bottom: 16px;
  /deep/ .ivu-table-wrapper {
    border-bottom: none;
  }
}
.table-bottom {
  display: flex;
  justify-content: space-between;
  .table-btns {

  }
}
.ivu-date-picker {
  width: 266px;
}
</style>